<template>
	<!-- 我们这里直接抄的代码，给-个注释把，因为我也不会写这个样式，这个需要了这个样式才行的. -->
	<view class="content">
		<!-- 这里的list就是展示的滚动表. -->
		<view class="uni-list">
			<!-- 这里是遍历，下面的item都是遍历的-结果,需要-提供的参数只有news. -->
			<!-- tab openinfo是调用script的函数tab ,这里是啥，为啥没有onclick，烦躁.-->
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="openinfo"
			 :data-newsid="item.post_id">
				<!-- 这里是media媒体list。这里是单个的元素. -->
				<view class="uni-media-list">
					<!-- 标题图片-image -->
					<image class="uni-media-list-logo" :src="item.author_avatar"></image>
					<view class="uni-media-list-body">
						<!-- 如果是在标签内部的属性中可以直接调用，但是如果是在标签外部需要使用{{表达式才行}} -->
						<view class="uni-media-list-text-top">{{item.title}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				news: []
			}
		},
		// 我们将值储存到data中方便调用这里的method-赋值给data即可
		//onLond function 就是在页面在加载之后在运行的函数
		onLoad: function() {
			uni.showLoading({
				title: "showLoading..."
			})
			uni.request({
				url: "https://unidemo.dcloud.net.cn/api/news",
				method: "GET",
				data: {},
				success: (resp) => {
					// 我们这里将返回的数据赋值给news,实现数据的绑定.
					this.news = resp.data;
					// 我们加载完成后我们隐藏这个加载的动画.
					uni.hideLoading();
				},
				// 这里是请求失败的解决.
				fail: () => {

				},
				// 请求完成后
				complete: () => {

				}
			});
		},
		// 这里注册method是和加载时候就运行的method同级 ,就是onLoad
		methods: {
			// 这里的e 就是openinfo传递的参数
			// -这里的key前面的:冒号代表这是动态参数,从list里面取出来的.下面的句子需要重点理解.
			// :key="index" @tap="openinfo" :data-newsid="item.post_id"
			openinfo(e) {
				// 我们先看看打印的这啥东西.
				// console.log(e)
				var new_id = e.currentTarget.dataset.newsid;
				console.log(new_id)
				// 我们这里通过读取json数据拿到了,new_id我们需要带着这个newID 实现页面的跳转.
				uni.navigateTo({
				// 这里实现页面的跳转,然后带着get id，问题如何用其他方式传递数据毕竟get的方式太局限且不安全..
					url:"../info01/info01?newsid="+new_id
				});
			}
		}
	}
</script>

<style>
	/* 这里是list-body */
	.uni-media-list-body {
		height: auto;
	}

	.uni-media-list-text-top {
		line-height: 1.6em;
		font-weight: bold;
		font-size: large;
	}
</style>
